<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vanilla JS Datepicker Demo</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/github.min.css">
    <link rel="stylesheet" type="text/css" href="../dist/css/datepicker-bs4.css">
    <style type="text/css">
      main .section {
        padding: 3rem 1.5rem;
      }
      aside {
        position: fixed;
        top: 0;
        bottom: 0;
        right: -300px;
        width: 300px;
        overflow: auto;
        background-color: #fff;
        box-shadow: inset 1px 1px rgba(0, 0, 0, 10%);
        transition: right 0.3s;
      }
      .open aside {
        right: 0;
      }
      aside hr {
        margin-top: 0.5rem;
      }
      .code-wrap {
        position: relative;
      }
      .code-wrap pre {
        background-color: whitesmoke;
        padding: 1.25rem 1.5rem;
        max-height: 320px;
        overflow-y: auto;
      }
      .code-wrap pre:not(.is-active) {
        height: 0;
        overflow: hidden;
        opacity: 0.5;
      }
      .code-wrap .collapse-button {
        position: absolute;
        top: 0;
        right: 0;
        left: auto;
        background-color: #f6f6f6cc;
        cursor: pointer;
        padding: 0.125rem 0.25rem;
        font-size: 0.75rem;
      }
      .code-wrap pre:not(.is-active) + .collapse-button {
        background-color: transparent;
      }
      .code-wrap pre code.hljs {
        display: initial;
        overflow: initial;
        background: initial;
        padding: initial;
      }
      .option-type-selector {
        margin-top: -0.5rem;
      }
      .option-type-selector > label:first-of-type {
        margin: 0 0.25rem;
      }
      .is-hidden {
        display: none;
      }

      .toggle-button {
        position: fixed;
        top: 0.75rem;
        right: 0.75rem;
        width: 1.5rem;
        background-color: #fff;
        line-height: 1.5rem;
        border: 1px solid rgba(0, 0, 0, 10%);
        border-radius: 2px;
        box-shadow: 1px 1px rgba(0, 0, 0, 10%);
        cursor: pointer;
      }
      .toggle-button::before {
        content: '\25c0';
        padding-left: 0.25rem;
      }
      .open .toggle-button::before {
        content: '\25b6';
      }

      @media (min-width: 481px) {
        main {
          margin-right: 38.1966%;
        }
        aside {
          right: 0;
          width: 38.1966%;
        }
        .toggle-button {
          display: none;
        }
      }

      @media (min-width: 992px) {
        .code-wrap pre {
          max-height: calc(39vw - 7.5rem);
        }
      }
    </style>
  </head>
  <body>
    <main>
      <section class="section container-fluid">
        <div class="row">
          <div class="col">
            <p>Vanilla JS Datepicker</p>
            <h1 class="title">Demo</h1>
            <div id="sandbox">
              <div class="form-group"><input type="text" class="form-control date"></div>
            </div>
            <div id="elem-attribs" class="d-flex flex-wrap mb-3">
              <label>Attribute:</label>
              <div class="px-1">
                <div class="form-check form-check-inline mx-1">
                  <input type="checkbox" class="form-check-input" data-target="input" name="readonly" value="">
                  <label class="form-check-label">readonly</label>
                </div>
                <div class="form-check form-check-inline mx-1">
                  <input type="checkbox" class="form-check-input" data-target="input" name="disabled" value="">
                  <label class="form-check-label">disabled</label>
                </div>
                <div class="form-check form-check-inline mx-1" style="display: none;">
                  <input type="checkbox" class="form-check-input" data-target=".date" name="tabindex" value="0">
                  <label class="form-check-label">tabindex="0"</label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <p><small>Style: <a href="index.html">Bulma</a> | <em>Bootstrap (<a href="bs5.html">v5</a>, v4)</em> | <a href="foundation.html">Foundation</a> | <a href="plain-css.html">Plain CSS</a></small></p>
          </div>
        </div>
      </section>
    </main>

    <aside>
      <section class="section">
        <div class="card">
          <div class="card-body">
            <h4 class="subtitle">Type</h4>
            <form id="types">
              <div class="form-group">
                <div class="form-check form-check-inline">
                  <input type="radio" class="form-check-input" id="type-input" name="type" value="input" checked>
                  <label for="type-input" class="form-check-label">Input</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="radio" class="form-check-input" id="type-inline" name="type" value="inline">
                  <label for="type-inline" class="form-check-label">Inline</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="radio" class="form-check-input" id="type-range" name="type" value="range">
                  <label for="type-range" class="form-check-label">Range</label>
                </div>
              </div>
            </form>
          </div>
          <hr>
          <div class="card-body">
            <h4 class="subtitle">Options</h4>
            <form id="options">

              <div class="form-group form-check" data-toggle="tooltip" title="Only effective in range picker">
                <input type="checkbox" class="form-check-input" id="allowOneSidedRange" name="allowOneSidedRange" value="true">
                <label for="allowOneSidedRange" class="form-check-label">allowOneSidedRange</label>
              </div>

              <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="autohide" name="autohide" value="true">
                <label for="autohide" class="form-check-label">autohide</label>
              </div>

              <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="beforeShowDay" name="beforeShowDay" value="true">
                <label for="beforeShowDay" class="form-check-label">beforeShowDay</label>
                <div class="code-wrap">
                  <pre id="code-beforeShowDay"><code class="language-javascript"></code></pre>
                  <div class="collapse-button" data-target="code-beforeShowDay">show/hide</div>
                </div>
              </div>

              <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="beforeShowMonth" name="beforeShowMonth" value="true">
                <label for="beforeShowMonth" class="form-check-label">beforeShowMonth</label>
                <div class="code-wrap">
                  <pre id="code-beforeShowMonth"><code class="language-javascript"></code></pre>
                  <div class="collapse-button" data-target="code-beforeShowMonth">show/hide</div>
                </div>
              </div>

              <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="beforeShowYear" name="beforeShowYear" value="true">
                <label for="beforeShowYear" class="form-check-label">beforeShowYear</label>
                <div class="code-wrap">
                  <pre id="code-beforeShowYear"><code class="language-javascript"></code></pre>
                  <div class="collapse-button" data-target="code-beforeShowYear">show/hide</div>
                </div>
              </div>

              <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="beforeShowDecade" name="beforeShowDecade" value="true">
                <label for="beforeShowDecade" class="form-check-label">beforeShowDecade</label>
                <div class="code-wrap">
                  <pre id="code-beforeShowDecade"><code class="language-javascript"></code></pre>
                  <div class="collapse-button" data-target="code-beforeShowDecade">show/hide</div>
                </div>
              </div>

              <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="clearButton" name="clearButton" value="true">
                <label for="clearButton" class="form-check-label">clearButton</label>
              </div>

              <div class="form-group">
                <label class="label">dateDelimiter</label>
                <input type="text" class="form-control" name="dateDelimiter" placeholder=",">
              </div>

              <div class="form-group">
                <label class="label">datesDisabled</label>
                <div class="option-type-selector">
                  use
                  <label class="radio">
                    <input type="radio" name="datesDisabledFn" value="" checked>
                    array
                  </label>
                  <label class="radio">
                    <input type="radio" name="datesDisabledFn" value="1">
                    function
                  </label>
                </div>
                <div id="datesDisabled-arr" data-bs-toggle="tooltip" title="enter in JSON format">
                  <textarea class="form-control" name="datesDisabled" placeholder="[]"></textarea>
                  <div class="invalid-feedback"></div>
                </div>
                <div id="datesDisabled-fn" class="code-wrap is-hidden">
                  <pre id="code-datesDisabled"><code class="language-javascript"></code></pre>
                  <div class="collapse-button" data-target="code-datesDisabled">show/hide</div>
                </div>
              </div>

              <div class="form-group">
                <label for="daysOfWeekDisabled" class="label">daysOfWeekDisabled</label>
                <div>
                  <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input" id="daysOfWeekDisabled-0" name="daysOfWeekDisabled" value="0">
                    <label for="daysOfWeekDisabled-0" class="form-check-label">0</label>&nbsp;
                  </div>
                  <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input" id="daysOfWeekDisabled-1" name="daysOfWeekDisabled" value="1">
                    <label for="daysOfWeekDisabled-1" class="form-check-label">1</label>&nbsp;
                  </div>
                  <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input" id="daysOfWeekDisabled-2" name="daysOfWeekDisabled" value="2">
                    <label for="daysOfWeekDisabled-2" class="form-check-label">2</label>&nbsp;
                  </div>
                  <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input" id="daysOfWeekDisabled-3" name="daysOfWeekDisabled" value="3">
                    <label for="daysOfWeekDisabled-3" class="form-check-label">3</label>&nbsp;
                  </div>
                  <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input" id="daysOfWeekDisabled-4" name="daysOfWeekDisabled" value="4">
                    <label for="daysOfWeekDisabled-4" class="form-check-label">4</label>&nbsp;
                  </div>
                  <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input" id="daysOfWeekDisabled-5" name="daysOfWeekDisabled" value="5">
                    <label for="daysOfWeekDisabled-5" class="form-check-label">5</label>&nbsp;
                  </div>
                  <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input" id="daysOfWeekDisabled-6" name="daysOfWeekDisabled" value="6">
                    <label for="daysOfWeekDisabled-6" class="form-check-label">6</label>&nbsp;
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label for="daysOfWeekHighlighted" class="label">daysOfWeekHighlighted</label>
                <div>
                  <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input" id="daysOfWeekHighlighted-0" name="daysOfWeekHighlighted" value="0">
                    <label for="daysOfWeekHighlighted-0" class="form-check-label">0</label>&nbsp;
                  </div>
                  <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input" id="daysOfWeekHighlighted-1" name="daysOfWeekHighlighted" value="1">
                    <label for="daysOfWeekHighlighted-1" class="form-check-label">1</label>&nbsp;
                  </div>
                  <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input" id="daysOfWeekHighlighted-2" name="daysOfWeekHighlighted" value="2">
                    <label for="daysOfWeekHighlighted-2" class="form-check-label">2</label>&nbsp;
                  </div>
                  <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input" id="daysOfWeekHighlighted-3" name="daysOfWeekHighlighted" value="3">
                    <label for="daysOfWeekHighlighted-3" class="form-check-label">3</label>&nbsp;
                  </div>
                  <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input" id="daysOfWeekHighlighted-4" name="daysOfWeekHighlighted" value="4">
                    <label for="daysOfWeekHighlighted-4" class="form-check-label">4</label>&nbsp;
                  </div>
                  <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input" id="daysOfWeekHighlighted-5" name="daysOfWeekHighlighted" value="5">
                    <label for="daysOfWeekHighlighted-5" class="form-check-label">5</label>&nbsp;
                  </div>
                  <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input" id="daysOfWeekHighlighted-6" name="daysOfWeekHighlighted" value="6">
                    <label for="daysOfWeekHighlighted-6" class="form-check-label">6</label>&nbsp;
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label class="label">defaultViewDate</label>
                <input type="text" class="form-control" name="defaultViewDate" placeholder="today">
              </div>

              <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="enableOnReadonly" name="enableOnReadonly" value="true" checked>
                <label for="enableOnReadonly" class="form-check-label">enableOnReadonly</label>
              </div>

              <div class="form-group">
                <label class="label">format</label>
                <input type="text" class="form-control" name="format" placeholder="mm/dd/yyyy">
              </div>

              <div class="form-group">
                <label class="label">language</label>
                <select class="form-control" name="language" >
                  <option value="en">en – English (US)</option>
                </select>
              </div>

              <div class="form-group">
                <label class="label">maxDate</label>
                <input type="text" class="form-control" name="maxDate" placeholder="null">
              </div>

              <div class="form-group" data-toggle="tooltip" title="Not effective in range picker">
                <label class="label">maxNumberOfDates</label>
                <input type="text" class="form-control" name="maxNumberOfDates" placeholder="1">
              </div>

              <div class="form-group">
                <label class="label">maxView</label>
                <select class="form-control" name="maxView">
                  <option value="0">0 – days</option>
                  <option value="1">1 – months</option>
                  <option value="2">2 – years</option>
                  <option value="3" selected>3 – decades</option>
                </select>
              </div>

              <div class="form-group">
                <label class="label">minDate</label>
                <input type="text" class="form-control" name="minDate" placeholder="null">
              </div>

              <div class="form-group">
                <label class="label">nextArrow</label>
                <textarea class="form-control" name="nextArrow" placeholder="»"></textarea>
              </div>

              <div class="form-group">
                <label class="label">orientation</label>
                <select class="form-control" name="orientation" >
                  <option value="auto">auto</option>
                  <option value="top auto">top auto</option>
                  <option value="bottom auto">bottom auto</option>
                  <option value="auto left">auto left</option>
                  <option value="top left">top left</option>
                  <option value="bottom left">bottom left</option>
                  <option value="auto right">auto right</option>
                  <option value="top right">top right</option>
                  <option value="bottom right">bottom right</option>
                </select>
              </div>

              <div class="form-group">
                <label class="label">pickLevel</label>
                <select class="form-control" name="pickLevel">
                  <option value="0">0 – date</option>
                  <option value="1">1 – month</option>
                  <option value="2">2 – year</option>
                </select>
              </div>

              <div class="form-group">
                <label class="label">prevArrow</label>
                <textarea class="form-control" name="prevArrow" placeholder="«"></textarea>
              </div>

              <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="showDaysOfWeek" name="showDaysOfWeek" value="true" checked>
                <label for="showDaysOfWeek" class="form-check-label">showDaysOfWeek</label>
              </div>

              <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="showOnClick" name="showOnClick" value="true" checked>
                <label for="showOnClick" class="form-check-label">showOnClick</label>
              </div>

              <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="showOnFocus" name="showOnFocus" value="true" checked>
                <label for="showOnFocus" class="form-check-label">showOnFocus</label>
              </div>

              <div class="form-group">
                <label class="label">startView</label>
                <select class="form-control" name="startView">
                  <option value="0">0 – days</option>
                  <option value="1">1 – months</option>
                  <option value="2">2 – years</option>
                  <option value="3">3 – decades</option>
                </select>
              </div>

              <div class="form-group">
                <label class="label">title</label>
                <input type="text" class="form-control" name="title">
              </div>

              <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="todayButton" name="todayButton" value="true">
                <label for="todayButton" class="form-check-label">todayButton</label>
              </div>

              <div class="form-group">
                <label class="label">todayButtonMode</label>
                <select class="form-control" name="todayButtonMode">
                  <option value="0">0 – focus</option>
                  <option value="1">1 – select</option>
                </select>
              </div>

              <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="todayHighlight" name="todayHighlight" value="true">
                <label for="todayHighlight" class="form-check-label">todayHighlight</label>
              </div>

              <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="updateOnBlur" name="updateOnBlur" value="true" checked>
                <label for="updateOnBlur" class="form-check-label">updateOnBlur</label>
              </div>

              <div class="form-group">
                <label class="label">weekNumbers</label>
                <select class="form-control" name="weekNumbers">
                  <option value="0">0 – None</option>
                  <option value="1">1 – ISO 8601</option>
                  <option value="2">2 – Western traditional</option>
                  <option value="3">3 – Middle Eastern</option>
                  <option value="4">4 – Guess from weekStart</option>
                </select>
              </div>

              <div class="form-group">
                <label class="label">weekStart</label>
                <input type="text" class="form-control" name="weekStart" placeholder="0">
              </div>

            </form>
          </div>
          <hr>
          <div class="card-body">
            <h4 class="subtitle">Text direction</h4>
            <form id="direction">
              <div class="form-group">
                <div class="form-check form-check-inline">
                  <input type="radio" class="form-check-input" id="direction-ltr" name="direction" value="ltr" checked>
                  <label for="direction-ltr" class="form-check-label">LTR</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="radio" class="form-check-input" id="direction-rtl" name="direction" value="rtl">
                  <label for="direction-rtl" class="form-check-label">RTL</label>
                </div>
              </div>
            </form>
          </div>
        </div>
      </section>
    </aside>

    <div class="toggle-button"></div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/highlight.min.js"></script>
    <script src="../dist/js/datepicker-full.js"></script>
    <script src="./live-demo.js"></script>
    <script>
      /*global $ initialize onChangeType onChangeDirection onChangeInputOption onChangeInputOption onChangeTextareaOption onClickCheckboxOptions switchPicker */
      window.templates = {
        inline: `<div class="date"></div>`,
        range: `<div class="d-flex flex-row date input-daterange">
  <div class="form-group">
    <input type="text" name="range-start" class="form-control">
  </div>
  <div class="flex-grow-0">
    <a class="btn" disabled>to</a>
  </div>
  <div class="form-group">
    <input type="text" name="range-end" class="form-control">
  </div>
</div>`,
      };
      window.beforeShowFns = {
beforeShowDay(date) {
  if (date.getMonth() == new Date().getMonth()) {
    switch (date.getDate()) {
      case 4:
        return {
          content: '<span data-toggle="tooltip" title="Example tooltip">4</span>',
          classes: 'bg-info'
        };
      case 8:
        return {content: '🎱'};
      case 12:
        return "text-success";
    }
  }
},
beforeShowMonth(date) {
  switch (date.getMonth()) {
    case 6:
      if (date.getFullYear() === new Date().getFullYear()) {
        return {content: '🎉'};
      }
      break;
    case 8:
      return 'highlighted';
  }
},
beforeShowYear(date) {
  switch (date.getFullYear()) {
    case 2020:
      return 'font-italic text-monospace';
    case 2025:
      return {content: '<span data-toggle="tooltip" data-placement="bottom" title="Tooltip text">2025</span>'};
  }
},
beforeShowDecade(date) {
  switch (date.getFullYear()) {
    case 2000:
      return 'font-weight-bold';
    case 2100:
      return {
        content: '2💯',
        classes: 'bg-success',
      };
  }
},
      };
      window.buttonClass = 'btn';
      window.addError = function addError(el, message) {
        el.classList.add('is-invalid');
        el.parentElement.querySelector('.invalid-feedback').textContent = message;
      }
      window.removeErrors = function removeErrors(el) {
        el.classList.remove('is-invalid');
        el.parentElement.querySelector('.invalid-feedback').textContent = '';
      }

      initialize();
      hljs.highlightAll();

      document.getElementById('types').querySelectorAll('input').forEach((el) => {
        el.addEventListener('change', onChangeType);
      });

      document.getElementById('direction').querySelectorAll('input').forEach((el) => {
        el.addEventListener('change', onChangeDirection);
      });

      const optsForm = document.getElementById('options');
      optsForm.querySelectorAll('input[type=text], input[type=radio], select').forEach((el) => {
        el.addEventListener('change', onChangeInputOption);
      });
      optsForm.querySelectorAll('textarea').forEach((el) => {
        el.addEventListener('change', onChangeTextareaOption);
      });
      optsForm.querySelectorAll('input[type=checkbox]').forEach((el) => {
        el.addEventListener('click', onClickCheckboxOptions);
      });

      switchPicker('input');

      const initTooltips = () => {
        $('[data-toggle="tooltip"]').tooltip();
      };
      setInterval(initTooltips, 1000);
      initTooltips();
    </script>
  </body>
</html>